<script setup lang="ts">
import {withDefaults} from 'vue'
import type {ButtonType} from 'vant'

withDefaults(defineProps<{
  time: string;
  subject: string;
  current: number;
  total: number;
  status?: number;
  info: string;
  click?: () => void;
  tag?: boolean
  buttonText?: string | number
  buttonType?: ButtonType
}>(), {
  time: '-',
  subject: '科目一',
  current: 0,
  total: 0,
  status: 0,
  info: '',
  tag: false,
  buttonText: "",
  buttonType: 'default'
})

</script>

<template>
  <div class="lesson-item">
    <div class="lesson-item-left">
      <p class="lesson-item-time">{{ time }}</p>
      <p class="lesson-item-title">{{ subject }}</p>
      <p class="lesson-item-num">{{ `已预约人数（${current}/${total}）` }}</p>
      <p class="lesson-item-info">{{ info }}</p>
    </div>
    <div class="lesson-item-right">
      <VanButton size="small" @click="click" :type="buttonType">{{ buttonText }}</VanButton>
      <van-tag v-if="tag" color="#409eff" text-color="#409eff" size="large" plain>已学习</van-tag>
    </div>
  </div>
</template>

<style scoped lang="less">
.lesson-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

  &:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

  &-time {
    font-size: 16px;
    font-weight: 800;
    line-height: 22px;
  }

  &-title {
    font-size: 16px;
    line-height: 20px;
  }

  &-num {
    font-size: 14px;
    color: #999;
    line-height: 20px;
  }

  &-info {
    font-size: 14px;
    color: #999;
    line-height: 20px;
  }
}
</style>
